<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md10">
        <p align="center" style="font-size: 40px">各区域房间数汇总</p>
    </div>
</div>
<div class="layui-row layui-col-space10">
    <div align="center" class="layui-col-md10">
        <div id="fun" style="width: 800px;height:600px;"></div>
    </div>
</div>
<div class="layui-row layui-col-space10">
    <div align="center" class="layui-col-md10">
        <div id="funuse" style="width: 800px;height:600px;"></div>
    </div>
</div>
<div class="layui-row layui-col-space10">
    <div align="center" class="layui-col-md10">
        <div id="depart" style="width: 800px;height:600px;"></div>
    </div>
</div>
<div class="layui-row layui-col-space10">
    <div align="center" class="layui-col-md10">
        <div id="enterprise" style="width: 800px;height:600px;"></div>
    </div>
</div>



</body>

<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/excel/echarts.min.js"></script>

<script type="text/javascript">


    var form = layui.form;
    var layer = layui.layer;
    var $ = jQuery = layui.jquery;

    layui.use(['layer'], function () {
        var datatemp1= [];
        var datatemp2 = [];
        var datatemp3 = [];
        var datatemp4 = [];

        var chartDom = document.getElementById('fun');
        var myChart1 = echarts.init(chartDom);
        var option1 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: datatemp1
                }
            ]
        };

        CoreUtil.sendAjax("/sys/chart/fun", null, function (res) {

            for (var i = 0; i < res.data.length; i++) {
                var ob = {value:"", name:""};
                ob.name = res.data[i].fun;
                ob.value = res.data[i].count;
                datatemp1.push(ob);
            }
            myChart1.setOption(option1);
        }, "POST", false);





        var myChart2 = echarts.init(document.getElementById('funuse'));
        var option2 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: datatemp2
                }
            ]
        };

        CoreUtil.sendAjax("/sys/chart/funuse", null, function (res) {

            for (var i = 0; i < res.data.length; i++) {
                var ob = {value:"", name:""};
                ob.name = res.data[i].funuse;
                ob.value = res.data[i].count;
                datatemp2.push(ob);
            }
            myChart2.setOption(option2);
        }, "POST", false);




        var myChart3 = echarts.init(document.getElementById('depart'));
        var option3 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: datatemp3
                }
            ]
        };

        CoreUtil.sendAjax("/sys/chart/depart", null, function (res) {

            for (var i = 0; i < res.data.length; i++) {
                var ob = {value:"", name:""};
                ob.name = res.data[i].depart;
                ob.value = res.data[i].count;
                datatemp3.push(ob);
            }
            myChart3.setOption(option3);
        }, "POST", false);





        var myChart4 = echarts.init(document.getElementById('enterprise'));
        var dataShadow = [];
        var yMax = 50;
        var dataAxis = [];
        var data = [];


        var option4 = {
            title: {
                text: '各企业所占房间数',
                subtext: '可以点击放大'
            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    inside: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [
                {
                    type: 'bar',
                    showBackground: true,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#83bff6'},
                                {offset: 0.5, color: '#188df0'},
                                {offset: 1, color: '#188df0'}
                            ]
                        )
                    },
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#2378f7'},
                                    {offset: 0.7, color: '#2378f7'},
                                    {offset: 1, color: '#83bff6'}
                                ]
                            )
                        }
                    },
                    data: data
                }
            ]
        };

        CoreUtil.sendAjax("/sys/chart/enterprise", null, function (res) {

            for (var i = 0; i < res.data.length; i++) {
                dataAxis.push(res.data[i].enterprise);
                data.push(res.data[i].count);
                dataShadow.push(yMax);
            }
            myChart4.setOption(option4);
        }, "POST", false);


        var zoomSize = 6;
        myChart4.on('click', function (params) {
            console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
            myChart4.dispatchAction({
                type: 'dataZoom',
                startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
            });
        });





    });
</script>
</html>